document.write(`<Link rel="stylesheet" type="text/css" href="style/index.css" />`);

// html 加载过程, 从上向下
// 组件名: myComp => 使用时使用松散命名<my-comp>
// 组件就是将页面元素,写在组件内部的Vue对象
// vue组件的页面元素必须是单根节点
Vue.component("bbs", {
    template: `
        <div>
            <DIV class="logo">
                <a href="index.html">
                    <img src="image/logo.jpg" 
                    alt="logo" 
                    style=" max-width: 100%;
                    max-height: 100px;
                    height: auto;">
                </a>
            </DIV>
            <!--      用户信息、登录、注册        -->
        
            <DIV class="h flex">
                <div class="login flex" v-if="myinfo==null" style="height: 28px">
                    您尚未　<a href="login.html">登录</a>
                    &nbsp;| &nbsp; <A href="reg.html">注册</A> |
                </div>
                <div class="login flex" v-else style="height: 28px">
                    欢迎: {{myinfo.cname}}
                    <el-avatar size="small" 
                    :src="myinfo.head"  @click.native="dialogFormVisible = true"></el-avatar>
                    <el-button type="text" @click="dialogVisible = true" style=" color: #2f5fa1; font-size: 12px;">修改密码</el-button>
                    <el-button type="text" @click.prevent="getQuestion" style=" color: #2f5fa1; font-size: 12px;">设置私密问题</el-button>
                    <el-button type="text" style=" color: #2f5fa1; font-size: 12px;">我的收藏</el-button>

                <el-dialog title="私密问题" :visible.sync="dialogFormVisible2">
                    <el-form :model="form">
                        <el-form-item label="问题1" :label-width="formLabelWidth">
                            <el-input v-model="form.q1" autocomplete="off" :placeholder="'例如:' + exaQuestion.q1"></el-input>
                        </el-form-item>
                        <el-form-item label="答案1" :label-width="formLabelWidth">
                            <el-input v-model="form.a1" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="问题2" :label-width="formLabelWidth">
                            <el-input v-model="form.q2" autocomplete="off" :placeholder="'例如:' + exaQuestion.q2"></el-input>
                        </el-form-item>
                        <el-form-item label="答案2" :label-width="formLabelWidth">
                            <el-input v-model="form.a2" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="问题3" :label-width="formLabelWidth">
                            <el-input v-model="form.q3" autocomplete="off" :placeholder="'例如:' + exaQuestion.q3"></el-input>
                        </el-form-item>
                        <el-form-item label="答案3" :label-width="formLabelWidth">
                            <el-input v-model="form.a3" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="uploadQuestion()">确 定</el-button>
                        </div>
                </el-dialog>
                    <a href="user/logout" style="color: #2f5fa1; font-size: 12px; text-decoration: none;">退出</a>
                </div>
            </DIV>

            <!-- 广告 -->
            <div class="fixed-a">
                <div class="fixed-ad">
                    <div class="ad-content">
                        <a href="https://ys.mihoyo.com/" target="_blank">
                            <h3>《原神》官方网站-全新5.2版本「灵与火的织卷」上线!</h3>
                            <img src="image/ad1.jpg" class="ad-image"/>
                            <div class="ad-text">
                                全新5.2版本「灵与火的织卷」现已推出!《原神》是由米哈游自研的一款开放世界冒险RPG。你将在游戏中探索...
                            </div>
                        </a>
                    </div>
                    <button class="close-btn" @click="closeAd">×</button>
                </div>
                <div class="fixed-ad">
                    <div class="ad-content">
                        <a href="https://www.pandadastudio.com/" target="_blank">
                            <h3>《忍者必须死3》 - 风靡全球的水墨风战斗跑酷</h3>
                            <img src="image/ad2.jpg" class="ad-image"/>
                            <div class="ad-text">
                                《忍者必须死3》是由杭州小白工作室出品的一款纯手绘开场动画跑酷手游,手感极佳又炫酷非凡的动作替身法术,赶紧来...
                            </div>
                        </a>
                    </div>
                    <button class="close-btn" @click="closeAd">×</button>
                </div>
                <div class="fixed-d"></div>
            </div>

             <!-- Form -->        
    <el-dialog title="修改密码" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="原密码" >
          <el-input v-model="form.upass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重置密码" >
         <el-input v-model="form.upass1" autocomplete="off"></el-input>
         <el-form-item label="确认密码" >
          <el-input v-model="form.upass2" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.prevent="setp">确 定</el-button>
      </div>
    </el-dialog>
            <!--      主体        -->
            <main>
                <div class="content">
                    <slot></slot>
                </div>
            </main>

            <BR/>
            <div class="container">
                <h1 class="title">友情链接</h1>
                <div v-if="links.length > 0" class="link-list" id="links-container">
                    <div v-for="(link, index) in links" :key="index">
                        <a :href="link.link" target="_blank">{{ link.name }}</a>
                    </div>
                </div>
                <div v-else>
                    <p>暂无友情链接</p>
                </div>
            </div>
            <BR/>
            <CENTER class="gray">源辰信息</CENTER>
             <!-- 对话框 -->
    <el-dialog
      title="请选择头像"
      :visible.sync="dialogFormVisible"
      width="30%">
      
      <!-- 对话框内容 -->
        <div class="preview-box" style="margin-top: 10px;text-align: center;margin-left: -140px">
         <img :src="head" alt="" style="max-width: 100px;max-height: 100px;border: 1px solid #ccc;border-radius: 4px;">
        </div>
    <label for="">请选择头像</label>
    <div class="file-upload">
        <el-input placeholder="粘贴图片地址" v-model="head">
            <el-upload slot="append"
               action="user/upload"
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload"
               :show-file-list="false"
            name="head">
            <el-button icon="el-icon-upload2"></el-button>
            </el-upload>
        </el-input>
    (优先使用文件中的图片)
    </div>
    <img src="image/head/1.gif"/><input type="radio" name="head" value="image/head/1.gif" v-model="head">
    <img src="image/head/2.gif"/><input type="radio" name="head" value="image/head/2.gif" v-model="head">
    <img src="image/head/3.gif"/><input type="radio" name="head" value="image/head/3.gif" v-model="head">
    <img src="image/head/4.gif"/><input type="radio" name="head" value="image/head/4.gif" v-model="head">
    <img src="image/head/5.gif"/><input type="radio" name="head" value="image/head/5.gif" v-model="head">
    <BR/>
    <img src="image/head/6.gif"/><input type="radio" name="head" value="6.gif" v-model="head">
    <img src="image/head/7.gif"/><input type="radio" name="head" value="7.gif" v-model="head">
    <img src="image/head/8.gif"/><input type="radio" name="head" value="8.gif" v-model="head">
    <img src="image/head/9.gif"/><input type="radio" name="head" value="9.gif" v-model="head">
    <img src="image/head/10.gif"/><input type="radio" name="head" value="10.gif" v-model="head">
    <BR/>
    <img src="image/head/11.gif"/><input type="radio" name="head" value="11.gif" v-model="head">
    <img src="image/head/12.gif"/><input type="radio" name="head" value="12.gif" v-model="head">
    <img src="image/head/13.gif"/><input type="radio" name="head" value="13.gif" v-model="head">
    <img src="image/head/14.gif"/><input type="radio" name="head" value="14.gif" v-model="head">
    <img src="image/head/15.gif"/><input type="radio" name="head" value="15.gif" v-model="head">
    <br/>
          
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取消</el-button>
    <el-button type="primary" @click="updateHead">确定</el-button>
    </span>
    </el-dialog>
      
    `,
    data() {
        return {
            myinfo: null,
            dialogFormVisible: false, // 控制对话框显示的变量
            dialogVisible:false,
            head: 'image/head/1.gif',
            dialogFormVisible2 : false,
            formLabelWidth : '120px',
            exaQuestion:{},
            form:{
                upass:"",
                upass1:"",
                upass2:"",
                q1:'',
                a1:'',
                q2:'',
                a2:'',
                q3:'',
                a3:'',
            },
            links: [],
        };
    },
    // 创建钩子函数
    created() {
        axios.get("user/myinfo")
            .then(res => this.myinfo = res.data.data);
    },
    methods: {
        handleAvatarSuccess(res, file) {
            //el-upload 返回的 res.data => axios res.data.data
            //res.data => webPath
            this.head = res.data;
            console.log("this.myinfo:"+this.myinfo)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type.startsWith('image/');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是图片格式！');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB！');
            }
            return isJPG && isLt2M;
        },
        updateHead(){
            let p=new URLSearchParams();
            p.append("head",this.head);
            axios.post("user/updateHead",p).then(res=>{
                if(res.data.code==200){
                    this.$message("修改成功！");
                    this.myinfo.head=this.head;
                }else{
                    this.$message.error('修改失败，请稍后再试！');
                }
            }).finally(this.dialogFormVisible=false);
        },
        setp(){
            if(this.form.upass1!=this.form.upass2){
                alert("确认密码与密码不一致");
                return;
            }
            let p = new URLSearchParams();
            p.append("upass",this.form.upass);
            p.append("upass1",this.form.upass1);
            axios.post("user/setp",p).then(res=>{
                console.log(p);
                if (res.data.code != 200){
                    alert(res.data.msg);
                }else{
                    this.form.dialogVisible = true;
                }
            });
        },
        uploadQuestion(){
            let p = new URLSearchParams();
            p.append("q1", this.form.q1);
            p.append("a1", this.form.a1);
            p.append("q2", this.form.q2);
            p.append("a2", this.form.a2);
            p.append("q3", this.form.q3);
            p.append("a3", this.form.a3);
            p.append("uname", this.myinfo.uname);
            axios.post("user/question", p).then(res=>{
                if (res.data.code == 1) {
                    this.$message("添加成功")
                    this.dialogFormVisible2 = false;
                }else{
                    this.$alert(res.data.msg)
                }
            })
        },
        getQuestion(){
            this.dialogFormVisible2 = true
            axios.post("user/getQuestion").then(res=>{
                this.exaQuestion = res.data.data
            })
        },
        closeAd(event) {
            const ad = event.target.closest('.fixed-ad');
            ad.style.display = 'none'; // 隐藏广告
        },
        fetchLinks() {
            fetch('Link/getLinks')  // 替换为实际的 API 地址
                .then(response => response.json()) // 假设返回的是 JSON 格式的数据
                .then(data => {
                    if (Array.isArray(data) && data.length > 0) {
                        this.links = data; // 设置 links 数据
                    } else {
                        this.links = []; // 如果返回数据为空，则清空 links
                    }
                })
                .catch(error => {
                    console.error('请求失败:', error);
                    this.links = []; // 请求失败时清空
                });
        },
    },
    // 计算属性
    computed: {},
    // 第一次渲染的钩子函数
    mounted() {
        this.fetchLinks();
    },
    // 第N次渲染的钩子函数
    updated() {
    },
});